<template>
	<view class="app">
		<view class="panel">
			<view class="flex-col setpidpage">
				<view class="flex justify-between inputitem">
					<view>生成数量</view>
					<view><input v-model="create.num" placeholder="请输入生成数量" /></view>
				</view>
				<view class="flex justify-between inputitem">
					<view>充值面额</view>
					<view><input v-model="create.amount" placeholder="请输入充值卡面额" /></view>
				</view>
				<view class="flex justify-center items-center btn-save">
					<button @tap.stop="recharge_card_create">生成充值卡</button>
				</view>
			</view>
		</view>
		
		<view class="panel">
			<view class="setpidpage">
				<view class="card-item" v-for="(item,index) in data.data">
					<view class="flex justify-between items-center">
						<view>
							<view>卡号:{{showHalf(item.code)}} 【<text class="amount">{{item.amount}}</text>元】</view>
							<view><text class="time" v-if="item.receive_time>0">{{item.receive_time}}</text></view>
						</view>
						<view style="text-align: right; flex: 1;">
							<view v-if="item.user_id==0 && item.use_time==0">
								未领取
							</view>
							<view v-else>
								<view>领取人:{{item.user_id}}</view>
								<view class="time">充值时间:{{item.use_time*1000|formatDate}}</view>
							</view>
						</view>
					</view>
					<view class="desc" v-if="item.receive_desc!=null">
						{{item.receive_desc}}
					</view>
				</view>
			</view>
			<view class="page" style="margin-top: 6px;">
				<view class="page-item">
					<wyb-pagination :total-items="data.total" :page-items="data.per_page" :current="data.current_page" :show-total-item="true" :show-icon="true" @change="loaddata"/>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				create:{
					num:0,amount:0
				},
				data:{}
			}
		},
		onLoad() {
			that=this;
			this.loaddata();
		},
		methods: {
			recharge_card_create(){
				if(!/^\d+$/.test(this.create.num) || Number(this.create.num)<1){
					uni.showToast({icon:'none',title:'生成数量不正确'});
					return;
				}
				if(!/^\d+$/.test(this.create.amount) || Number(this.create.amount)<1){
					uni.showToast({icon:'none',title:'充值卡面额不正确'});
					return;
				}	
				this.comm.http('/api/tool/recharge_card_create',this.create,'POST').then(res=>{
					uni.showToast({icon:'none',title:res.msg});
				});
			},
			showHalf(str) {
			  const len = str.length;
			  const front = str.slice(0, 4); // 前四位
			  const back = str.slice(-4); // 后四位
			  return front + (len > 8 ? '...' : '') + back;
			},
			loaddata(e={current:1}){
				if(e.current==1){
					that.data={};
				}
				Comm.http('/api/tool/recharge_card_list',{page:e.current},'POST').then(res=>{
					that.data=[];
					that.data=res.data;
					console.log(that.data);
				});
			}
		}
	}
</script>

<style lang="scss">
	.setpidpage{
		.inputitem{
			align-items: center;
			view:nth-child(2){
				flex: 1;margin-left: 8px;
				input{
					height:40px; width: 100%; border-bottom: 1px solid #f0f0f0; font-size: 13px;
				
				}
			}

		}
		.tips{
			font-size: 12px; color: #999; padding: 8px 0; display: block;
		}
		.card-item{
			padding: 8px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.time{
			color: #999; font-size: 12px;
		}
		.desc{
			padding-top: 6px; color: #999;
		}
		.amount{
			font-size: 16px;
		}
	}
</style>
